<!-- 宜居新房组件 -->
<template>
  <div>
    <p class="title">宜居新房 >></p>
    <div class="box">
      <!-- logo图 -->
      <img src="" class="smLogo" />
      <!-- 大广告图 -->
      <img src="" class="lPic" />
      <!-- 广告详情 -->
      <p class="adDetail">越秀研磨10载，匠造全国第四座和樾府-越
        秀大学城和樾府，主推建面110-175m低密
        全景雅宅，全南向户型，臻享270°静谧园
      </p>
      <div class="ad">
        <p class="hotTitle">热销楼盘：</p>
        <div class="hot">
          <div class="hotItem" v-for="item in hotList" :key="item.id">
            <span>{{item.title}}</span>
            <p>{{item.price}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup () {
    const hotList = ref([
      {
        id: 1,
        title: '越秀滨江•星航TOD',
        price: '46000元/m²'
      },
      {
        id: 2,
        title: '越秀•和樾府',
        price: '62000元/m²'
      },
      {
        id: 3,
        title: '越秀•大学城•和樾府',
        price: '售价待定'
      },
      {
        id: 4,
        title: '越秀•星汇城TOD',
        price: '26000元/m²'
      }
    ])
    return {
      hotList
    }
  }
})
</script>

<style lang='less' scoped>
.title {
  margin-left: 20px;
  margin-top: 42px;
  margin-bottom: 10px;
  font-family: 'HarmonyOS Sans SC';
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #333333;
}
.box {
  width: 290px;
  height: 467px;
  padding: 17px 12px;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #ededed;
  overflow: hidden;
  .smLogo {
    width: 160px;
    height: 50px;
    margin-bottom: 8px;
  }
  .lPic {
    width: 100%;
    height: 150px;
    margin-bottom: 8px;
  }
  .adDetail {
    margin-bottom: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-family: 'HarmonyOS Sans SC';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #9399a5;
  }
  .ad {
    display: block;
    text-align: start;
  }
  .hotTitle {
    margin-bottom: 8px;
    font-family: 'HarmonyOS Sans SC';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    color: #333333;
  }
  .hot {
    width: 100%;
    .hotItem {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      span {
        font-family: 'HarmonyOS Sans SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
      }
      p {
        display: block;
        width: 80px;
        font-family: 'HarmonyOS Sans SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #f15044;
      }
    }
  }
}
</style>
